import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../view/Home';
import Details from '../view/Details';
import My from '../view/My';
import Message from '../view/Message';
import Login from '../view/cld/Login';
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function TabStackRouter() {
  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
              tabBarActiveTintColor: '#6683E0',
          tabBarInactiveTintColor : 'gray',
        headerStyle: {
          backgroundColor: '#8A9BF6',
          height: 40,
        },
        headerTitleAlign: 'center',
        headerTintColor: '#fff',
      })}>
      <Tab.Screen
        name="HomeStack"
        component={Home}
        options={{title: '首页', headerShown: false}}
      />
      <Tab.Screen
        name="WorkStack"
        component={Details}
        options={{title: '工作台'}}
      />
      <Tab.Screen
        name="MessageStack"
        component={Message}
        options={{title: '消息'}}
      />
      <Tab.Screen name="MyStack" component={My} options={{title: '我的'}} />
    </Tab.Navigator>
  );
}

function StackRouter() {
  return (
    <Stack.Navigator initialRouteName="Login" >
      <Stack.Screen
        name="TabStack"
        component={TabStackRouter}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="Login"
        component={Login}
        options={{
          headerStyle: {backgroundColor: '#8A9BF6'},
          headerTintColor: '#fff',
            headerTitleAlign: 'center',
            backButtonVisible : false
        }}
      />
    </Stack.Navigator>
  );
}

export default StackRouter;
